<script>
import BookApi from '../../api/book';
import BookSearch from '../../components/book/BookSearch.vue';
import MyPagination from '../../components/MyPagination.vue';
import AvgRanking from '../../components/bookshelves/AvgRanking.vue';

export default {
    componets: {
        BookSearch,
        MyPagination,
        AvgRanking
    },
    data() {
        return {
            bookList: [],
            total: 0,
            pageSize: 7,
            curPage: 0,
            limit: -1,
            offset: -1
        }
    },
    methods: {
        async getBookList(limit = -1, offset = -1) {
            try {
                let orderBy = "created_time";
                let sort = "desc";
                const api = new BookApi();
                let res = await api.findAll(limit, offset, orderBy, sort);
                this.bookList = res.data;
                console.log(this.bookList);
            } catch (err) {
                console.error(err);
                this.$myMessageBox("应用服务器访问错误！");
            }
        },
        async getCount() {
            try {
                const api = new BookApi();
                let res = await api.getCount();
                this.total = res.data.total;
                console.log(this.total);
            } catch (err) {
                console.error(err);
                this.$myMessageBox("应用服务器访问错误！");
            }
        },
        async searchResult(data) {
            this.bookList = data;
        },
        goto(page) {
            this.curPage = page;
            this.offset = (page - 1) * this.pageSize;
            this.getBookList(this.limit, this.offset);
        }
    },
    async mounted() {
        this.curPage = 1;
        this.limit = this.pageSize;
        this.offset = 0;
        await this.getCount();
        await this.getBookList(this.limit, this.offset);
    }
}
</script>

<template>
    <div class="book-list">
        <div class="header">
            <my-pagination :total="total" :page-size="pageSize" :cur-page="curPage" :show-info="true" @goto="goto" />
            <book-search @search-result="searchResult"></book-search>
        </div>
        <div class="block">
            <ul>
                <li v-for="book in bookList" :key="book.id">
                    <div class="book">
                        <img :src="book.pic" :alt="book.title" referrerpolicy="no-referrer">
                        <p>
                            <span class="title"><router-link :to="'/book/' + book.id">{{
                                book.title }}</router-link></span>
                            <span class="author">{{ book.author }}</span>
                            <span class="isbn">{{ book.isbn }}</span>
                        </p>
                    </div>
                    <div class="related">
                        <avg-ranking :book-id="book.id" />
                    </div>
                </li>
                <li>
                    <router-link to="/book/add" class="a-img"></router-link>
                </li>
            </ul>
        </div>

    </div>
</template>

<style scoped>
div.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 4px;
    border-bottom: #06c dashed 1px;
}
ul {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
}

/* li {
  list-style-type: none;
  flex: auto;
  min-width: 25%;
  max-width: 25%;
  display: flex;
 } */

li {
    list-style-type: none;
    box-sizing: border-box;
    flex: 0 1 calc(25% - 16px);
    min-width: calc(25% - 16px);
    max-width: 100%;
    background-color: rgba(92, 92, 92, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 8px;
    padding: 16px;
    border-radius: 16px;
}

li:hover {
    background-color: rgba(120, 110, 255, 0.3);
}

li .book{
    display: flex;
}

li img {
    width: 120px;
    height: 165px;
}

li p {
    margin-left: 8px;
    font-size: 14px;
    display: flex;
    flex-direction: column;
}

li p span {
    margin-top: 5px;
}

li:last-of-type {
    background-color: #fff;
}

li:last-of-type .a-img {
    display: inline-block;
    width: 100%;
    height: 165px;
    background: url(../../assets/add-one.svg) no-repeat center center/80px;
}

li:last-of-type .a-img:hover {
    background: url(../../assets/add-one-hover.svg) no-repeat center center/80px;
}
</style>